<template>
  <div>
    <el-dialog
      title="选择检查对象"
      :visible="dialogCheckVisible"
      custom-class="custom-dialog"
      @open="initData"
      @close="closeDialog"
      width="78%"
    >
      <!-- <div class="table-container"> -->
      <div>
        <el-form
          ref="queryForm"
          class="query-more-form"
          size="mini"
          label-width="100px"
          :model="queryCheck"
        >
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="检查对象">
                <el-input
                  v-model="queryCheck.unitName"
                  class="search-ipt"
                  placeholder="请输入对象名"
                  maxlength="255"
                />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="时间">
                <el-date-picker
                  v-model="value1"
                  type="datetimerange"
                  range-separator="-"
                  start-placeholder="开始"
                  end-placeholder="结束"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  style="width: 100%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col> -->
            <el-col :span="3" class="btn-col">
              <el-button size="mini" class="search-btn" @click="selectCheck"
                >查询</el-button
              >
            </el-col>
            <el-col :span="3" class="btn-col">
              <el-button size="mini" class="search-btn" @click="pitchCheck"
                >选择</el-button
              >
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <!-- <el-col :span="6">
              <el-form-item label="检查人员">
                <el-input
                  v-model="queryCheck.key"
                  class="search-ipt"
                  placeholder="人员名称"
                  maxlength="255"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="检查数量">
                <el-input
                  v-model="queryCheck.key"
                  class="search-ipt"
                  placeholder="检查数"
                  maxlength="255"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="违规数量">
                <el-input
                  v-model="queryCheck.key"
                  class="search-ipt"
                  placeholder="违规数"
                  maxlength="255"
                />
              </el-form-item>
            </el-col> -->
          </el-row>
        </el-form>
        <div class="table-list-panel">
          <el-table
            ref="dataTable"
            v-loading="tableCheckLoading"
            border
            size="small"
            :data="checkTableData"
            height="300px"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="45"
              :selectable="row => isClickBtn(row.id, true)"
            />
            <el-table-column
              prop="unitName"
              label="检查对象"
              show-overflow-tooltip
            />
            <!-- <el-table-column
              prop="key"
              label="时间"
              width="200"
              show-overflow-tooltip
            />
            <el-table-column
              prop="key"
              label="检查人"
              width="100"
              show-overflow-tooltip
            />
            <el-table-column
              prop="key"
              label="检查数"
              width="80"
              show-overflow-tooltip
            />
            <el-table-column
              prop="key"
              label="违规数"
              width="80"
              show-overflow-tooltip
            /> -->
            <el-table-column width="78">
              <template slot-scope="scope">
                <el-button
                  class="table-inner-btn"
                  :disabled="isClickBtn(scope.row.id)"
                  size="mini"
                  @click="pitch(scope.row)"
                  >选择</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-panel">
          <Pagination
            :total="queryCheck.total"
            :page.sync="queryCheck.pageNum"
            :limit.sync="queryCheck.pageSize"
            layout="total, sizes, prev, pager, next"
            @pagination="selectCheck"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SearchPanel from "@/components/SearchPanel";
import Pagination from "@/components/Pagination";
import { getPage } from "@/api/performanceSupport/supervise";
export default {
  name: "SelectCheckObjectDialog",
  components: {
    Pagination,
    SearchPanel
  },
  props: {
    dialogCheckVisible: {
      type: Boolean,
      default: false
    },
    selectedCheck: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      checkTableData: [],
      queryCheck: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        unitName: ""
      },
      tableCheckLoading: false,
      pitchData: [],
      value1: ""
    };
  },
  created() {},
  mounted() {},
  methods: {
    isClickBtn(id, isCheckbox = false) {
      if (!this.selectedCheck || this.selectedCheck.length === 0) {
        if (isCheckbox) {
          return 1;
        } else {
          return false;
        }
      }
      let flag = false;
      this.selectedCheck.some(item => {
        if (item.id === id) {
          flag = true;
          return true;
        }
      });
      if (isCheckbox) {
        return flag ? 0 : 1;
      } else {
        return flag;
      }
    },
    initData() {
      this.selectCheck();
    },
    // 查询检查对象
    selectCheck() {
      this.tableCheckLoading = true;
      let isUserDataMsg = JSON.parse(localStorage.getItem("isUserDataMsg"));
      this.queryCheck.deptId = isUserDataMsg.deptId;
      const query = JSON.parse(JSON.stringify(this.queryCheck));
      getPage(query)
        .then(res => {
          this.tableCheckLoading = false;
          this.checkTableData = res.rows;
          this.queryCheck.total = res.total;
        })
        .catch(() => {
          this.tableCheckLoading = false;
        });
    },
    // 选择表格
    handleSelectionChange(val) {
      this.pitchData = val;
    },
    // 单个选择
    pitch(row) {
      this.$emit("addCheck", row);
      this.$refs.dataTable.clearSelection();
      this.$emit("closeCheckDialog");
    },
    // 选中的值添加到页面
    pitchCheck() {
      this.$emit("addCheck", this.pitchData);
      this.$emit("closeCheckDialog");
    },
    closeDialog() {
      this.$emit("closeCheckDialog");
    }
  }
};
</script>

<style lang="scss" scoped>
.el-dialog__body {
  padding-top: 0px;
}
</style>
